<template>
  <div>
    <el-dialog
      :visible.sync="remarkVisible"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      append-to-body
      width="550px"
    >
      <template slot="title">
        <div class="tishi">
          <span> {{ title }}时间</span>
        </div>
      </template>
      <div>
        <el-form
          label-width="90px"
          :model="rowData"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item label="事件名称" prop="name">
            <el-input
              v-model="rowData.name"
              placeholder="请输入事件名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="时间" class="is-required">
            <div class="tiem_class">
              <el-form-item prop="start_time">
                <el-date-picker
                  type="datetime"
                  placeholder="开始时间"
                  v-model="rowData.start_time"
                  style="width: 195px"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
              <div class="tiem_class_line">～</div>
              <el-form-item prop="end_time">
                <el-date-picker
                  type="datetime"
                  placeholder="结束时间"
                  v-model="rowData.end_time"
                  style="width: 195px"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  default-time="23:59:59"
                ></el-date-picker>
              </el-form-item>
              <!--  -->
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot-btn">
        <div class="form-group">
          <el-button
            type="primary"
            class="btn btn-success btn-block"
            @click="submitForm('ruleForm')"
          >
            确定
          </el-button>
        </div>
        <div class="form-group">
          <el-button
            class="btn btn-success btn-block close-btn"
            @click="cancel"
          >
            取消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'RemarksPopup',
  props: {},
  data() {
    return {
      remarkVisible: false,
      title: '',
      rules: {
        name: [{ required: true, message: '请输入事件名称', trigger: 'blur' }],
        start_time: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        end_time: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ]
      },
      rowData: {
        name: '',
        start_time: '',
        end_time: ''
      }
    }
  },
  methods: {
    // 父组件触发的方法
    showModal(fromData) {
      if (fromData) {
        this.rowData.name = fromData.rowData.name
        this.rowData.start_time = fromData.rowData.start_time
        this.rowData.end_time = fromData.rowData.end_time
        this.rowData.id = fromData.rowData.id
        this.title = '修改'
      } else {
        this.rowData = {}
        this.title = '添加'
      }
      this.remarkVisible = true
    },
    // 点击确认
    async onConfirm() {
      let urls = ''
      if (this.title == '修改') {
        urls = '/admin/appViewGray/change'
      } else {
        urls = '/admin/appViewGray/add'
      }
      try {
        let res = await this.request({
          url: urls,
          method: 'post',
          loading: true,
          data: {
            ...this.rowData
          }
        })
        if (res) {
          this.$message.success(res.msg)
          this.remarkVisible = false
          setTimeout(() => {
            this.$emit('ongetList')
          }, 500)
        }
      } catch (err) {
        this.errorHandler(err)
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.onConfirm()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击取消
    cancel() {
      this.remarkVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.foot-btn {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.close-btn {
  background: #f2f2f2;
  border-radius: 5px;
  color: #666666;
}
.tiem_class_line {
  height: 51px;
  margin: 0 8px;
}
</style>
